﻿@{
    ViewBag.Title = "Danh sách thiết bị";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">

    var required = '<span style="color:red;font-weight:bold" data-qtip="Bắt buộc nhập">*</span>';

    Ext.Loader.setPath('Ext.ux', 'extjs/ux');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*',
        'Ext.ux.DataTip'
    ]);

    Ext.define('VTV.TaDMS.Extjs.Model.DeviceCategory', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DeviceCategoryId', mapping: 'DeviceCategoryId', type: 'int'
        }, {
            name: 'ParentDeviceCategoryId', mapping: 'ParentDeviceCategoryId', type: 'int'
        }, {
            name: 'Name', mapping: 'Name', type: 'string'
        }, {
            name: 'Desciptions', mapping: 'Desciptions', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Device', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DeviceId', mapping: 'DeviceId', type: 'int'
        }, {
            name: 'DeviceCategoryId', mapping: 'DeviceCategoryId', type: 'int'
        }, {
            name: 'DepartmentId', mapping: 'DepartmentId', type: 'int'
        }, {
            name: 'Serial', mapping: 'Serial', type: 'string'
        }, {
            name: 'DeviceName', mapping: 'DeviceName', type: 'string'
        }, {
            name: 'DeviceDetail', mapping: 'DeviceDetail', type: 'string'
        }, {
            name: 'Manufacturer', mapping: 'Manufacturer', type: 'string'
        }, {
            name: 'DistributorId', mapping: 'DistributorId', type: 'int'
        }, {
            name: 'ProjectId', mapping: 'ProjectId', type: 'int'
        }, {
            name: 'DateOfPurchase', mapping: 'DateOfPurchase', type: 'date',
            convert: function (v, rec) {
                if (v) {
                    var date = new Date(v);
                    var a = Ext.Date.format(date, 'd-m-Y');
                    return a;
                } else {
                    return null;
                }
            }
        }, {
            name: 'MonthWarranty', mapping: 'MonthWarranty', type: 'int'
        }, {
            name: 'DeviceStatus', mapping: 'DeviceStatus', type: 'string'
        }, {
            name: 'DeviceAction', mapping: 'DeviceAction', type: 'string'
        }],
        idProperty: 'DeviceId',
        associations: [{
            type: 'belongsTo', model: 'VTV.TaDMS.Extjs.Model.Department', primaryKey: 'DeviceId', foreignKey: 'DepartmentId', autoLoad: true, associationKey: 'Department'
        }, {
            type: 'belongsTo', model: 'VTV.TaDMS.Extjs.Model.Distributor', primaryKey: 'DeviceId', foreignKey: 'DistributorId', autoLoad: true, associationKey: 'Distributor'
        }, {
            type: 'belongsTo', model: 'VTV.TaDMS.Extjs.Model.Project', primaryKey: 'DeviceId', foreignKey: 'ProjectId', autoLoad: true, associationKey: 'Project'
        }, {
            type: 'belongsTo', model: 'VTV.TaDMS.Extjs.Model.Category', primaryKey: 'DeviceId', foreignKey: 'DeviceCategoryId', autoLoad: true, associationKey: 'DeviceCategory'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Department', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DepartmentId', mapping: 'DepartmentId', type: 'int'
        }, {
            name: 'DepartmentName', mapping: 'DepartmentName', type: 'string'
        }],
        idProperty: 'DepartmentId',
        associations: [{
            type: 'hasMany', model: 'VTV.TaDMS.Extjs.Model.Device', primaryKey: 'DeviceId', foreignKey: 'DepartmentId', autoLoad: true, associationKey: 'Department'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Distributor', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DistributorId', mapping: 'DistributorId', type: 'int'
        }, {
            name: 'DistributorName', mapping: 'Name', type: 'string'
        }],
        idProperty: 'DistributorId',
        associations: [{
            type: 'hasMany', model: 'VTV.TaDMS.Extjs.Model.Device', primaryKey: 'DeviceId', foreignKey: 'DistributorId', autoLoad: true, associationKey: 'Distributor'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Project', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ProjectId', mapping: 'ProjectId', type: 'int'
        }, {
            name: 'ProjectName', mapping: 'Name', type: 'string'
        }],
        idProperty: 'ProjectId',
        associations: [{
            type: 'hasMany', model: 'VTV.TaDMS.Extjs.Model.Device', primaryKey: 'DeviceId', foreignKey: 'ProjectId', autoLoad: true, associationKey: 'Project'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Manufacturer', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Manufacture', mapping: 'Manufacture', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Serial', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Serial', mapping: 'Serial', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.DeviceName', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DeviceName', mapping: 'DeviceName', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.DeviceStatus', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DeviceStatus', mapping: 'DeviceStatus', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.MonthWarranty', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'MonthWarranty', mapping: 'MonthWarranty', type: 'string'
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Category', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DeviceCategoryId', mapping: 'DeviceCategoryId', type: 'int'
        }, {
            name: 'DeviceCategoryName', mapping: 'Name', type: 'string'
        }],
        idProperty: 'DeviceCategoryId',
        associations: [{
            type: 'hasMany', model: 'VTV.TaDMS.Extjs.Model.Device', primaryKey: 'DeviceId', foreignKey: 'ProjectId', autoLoad: true, associationKey: 'DeviceCategory'
        }]
    });

    Ext.onReady(function () {
        Ext.QuickTips.init();

        var departmentComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Department',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetDepartmentComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var manufacturerComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Manufacturer',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetManufacturerComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var serialComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Serial',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetSerialComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var deviceNameComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.DeviceName',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetDeviceNameComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var deviceStatusComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.DeviceStatus',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetDeviceStatusComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var monthWarrantyComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.MonthWarranty',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetMonthWarrantyComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var distributorComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Distributor',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetDistributorComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var projectComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Project',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetProjectComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var categoryComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Category',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetCategoryComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var treeStore = Ext.create('Ext.data.TreeStore', {
            model: 'VTV.TaDMS.Extjs.Model.DeviceCategory',
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDeviceCategory/GetAll'
                },
                reader: {
                    root: 'DeviceCategory1',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            },
            listeners: {
                append: function (thisNode, newChildNode, index, eOpts) {
                    if (!newChildNode.isRoot()) {
                        newChildNode.set('expanded', true);
                    }
                }
            }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
            title: 'Danh mục thiết bị',
            layout: 'fit',
            region: 'west',
            collapsible: true,
            width: 150,
            maxWidth: 250,
            minWidth: 100,
            split: true,
            margins: '0 0 0 0',
            store: treeStore,
            rootVisible: false,
            useArrows: true,
            singleExpand: false,
            columns: [{
                xtype: 'treecolumn', text: 'Tên danh mục', flex: 1, dataIndex: 'Name'
            }],
            listeners: {
                select: function (selection, record, index, eOpts) {
                    contentPanel.setTitle(record.get('Name') + ' - Danh sách thiết bị');
                    contentStore.getProxy().extraParams = {
                        start: 0,
                        limit: 20,
                        categoryId: record.get('DeviceCategoryId')
                    };

                    contentStore.load();
                }
            }
        });

        var contentStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Device',
            pageSize: 20,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiDevice/GetAll'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        Ext.define('DeviceWindown', {
            extend: 'Ext.window.Window',
            title: 'Thông tin thiết bị',
            modal: true,
            header: {
                titleAlign: 'center'
            },
            closeable: true,
            resizable: {
                handles: 'e w'
            },
            width: 600,
            height: 540,
            minWidth: 400,
            layout: 'fit',
            items: [{
                xtype: 'form', bodyPadding: '10 10 5 10',
                fieldDefaults: {
                    msgTarget: 'side', labelWidth: 100, labelAlign: 'top'
                },
                plugins: {
                    ptype: 'datatip'
                },
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    fieldLabel: 'Danh mục', id: 'cbbCategory', anchor: '47.5%', tooltip: 'Chọn danh mục thiết bị', xtype: 'combo', afterLabelTextTpl: required,
                    store: categoryComboStore, displayField: 'DeviceCategoryName', valueField: 'DeviceCategoryId', triggerAction: 'all', pageSize: 10, minChars: 1,
                    listConfig: {
                        loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                        getInnerTpl: function () {
                            return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                '{DeviceCategoryName}' +
                                '</div>';
                        }
                    }
                }, {
                    xtype: 'container', layout: 'hbox', anchor: '100%',
                    items: [{
                        xtype: 'container', flex: 1, border: false, layout: 'anchor', defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'Số serial', id: 'txtSerial', anchor: '95%', tooltip: 'Nhập số serial', tabIndex: 1, afterLabelTextTpl: required
                        }, {
                            fieldLabel: 'Ngày nhập', id: 'txtDateOfPurchase', anchor: '95%', tooltip: 'Chọn ngày', tabIndex: 3, afterLabelTextTpl: required, xtype: 'datefield', format: 'd-m-Y'
                        }, {
                            fieldLabel: 'Bảo hành', id: 'txtMonthWarranty', anchor: '95%', tooltip: 'Nhập thời gian bảo hành theo THÁNG', tabIndex: 5
                        }, {
                            fieldLabel: 'Phân phối', id: 'cbbDistributor', anchor: '95%', tooltip: 'Nhập hãng phân phối', tabIndex: 7, xtype: 'combo',
                            store: distributorComboStore, displayField: 'DistributorName', valueField: 'DistributorId', triggerAction: 'all', pageSize: 10, minChars: 1,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DistributorName}' +
                                        '</div>';
                                }
                            }
                        }]
                    }, {
                        xtype: 'container', flex: 1, border: false, layout: 'anchor', defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'Tên thiết bị', id: 'txtDeviceName', anchor: '100%', tooltip: 'Nhập tên thiết bị', tabIndex: 2, afterLabelTextTpl: required
                        }, {
                            fieldLabel: 'Phòng', id: 'cbbDepartment', anchor: '100%', tooltip: 'Chọn phòng', tabIndex: 4, xtype: 'combo',
                            store: departmentComboStore, displayField: 'DepartmentName', valueField: 'DepartmentId', triggerAction: 'all', pageSize: 10, minChars: 1,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DepartmentName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Dự án', id: 'cbbProject', anchor: '100%', tooltip: 'Chọn dự án', tabIndex: 6, xtype: 'combo',
                            store: projectComboStore, displayField: 'ProjectName', valueField: 'ProjectId', triggerAction: 'all', pageSize: 10, minChars: 1,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{ProjectName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Sản xuất', id: 'cbbManufacturer', anchor: '100%', tooltip: 'Nhập hãng sản xuất', tabIndex: 8, xtype: 'combo',
                            store: manufacturerComboStore, displayField: 'Manufacture', valueField: 'Manufacture', pageSize: 10, minChars: 1,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{Manufacture}' +
                                        '</div>';
                                }
                            }
                        }]
                    }]
                }, {
                    fieldLabel: 'Tình trạng', defaultType: 'radiofield', xtype: 'fieldcontainer', layout: 'hbox', labelAlign: 'left',
                    defaults: {
                        flex: 1
                    },
                    items: [
                        {
                            boxLabel: 'Tốt', name: 'status', inputValue: 'G', id: 'radioG', tabIndex: 9
                        }, {
                            boxLabel: 'Cần sửa chữa', name: 'status', inputValue: 'F', id: 'radioF', tabIndex: 10
                        }, {
                            boxLabel: 'Cần thay thế', name: 'status', inputValue: 'N', id: 'radioN', tabIndex: 11
                        }
                    ]
                }, {
                    xtype: 'htmleditor', id: 'txtHtml', height: 200, fieldLabel: 'Mô tả chi tiết', tabIndex: 12
                }]
            }],
            buttons: [{
                text: 'Lưu', id: 'btnSave', tabIndex: 13,
                handler: function () {

                    //alert(Ext.getCmp('cbbManufacturer').getValue() + ' ' + Ext.getCmp('cbbDepartment').getValue() + ' ' + Ext.getCmp('cbbDistributor').getValue() + ' ' + Ext.getCmp('cbbProject').getValue());
                    var row = Ext.getCmp('newDeviceWindown').rec;
                    if (row) {
                        var fieldsChange = '';

                        var categoryId = Ext.getCmp('cbbCategory').getValue();
                        var serial = Ext.getCmp('txtSerial').getValue();
                        var deviceName = Ext.getCmp('txtDeviceName').getValue();
                        var dateOfPurchase = Ext.getCmp('txtDateOfPurchase').getValue();
                        var departmentId = Ext.getCmp('cbbDepartment').getValue();
                        var monthWarranty = Ext.getCmp('txtMonthWarranty').getValue();
                        var projectId = Ext.getCmp('cbbProject').getValue();
                        var distributorId = Ext.getCmp('cbbDistributor').getValue();
                        var manufacturer = Ext.getCmp('cbbManufacturer').getValue();
                        var deviceDetail = Ext.getCmp('txtHtml').getValue();
                        var deviceStatus;
                        if (Ext.getCmp('radioG').getValue()) {
                            deviceStatus = 'G';
                        }
                        if (Ext.getCmp('radioF').getValue()) {
                            deviceStatus = 'F';
                        }
                        if (Ext.getCmp('radioN').getValue()) {
                            deviceStatus = 'N';
                        }



                        if (row.raw.DeviceCategoryId != categoryId) {
                            fieldsChange += '$DeviceCategoryId';
                        }
                        if (row.raw.Serial != serial) {
                            fieldsChange += '$Serial';
                        }
                        if (row.raw.DeviceName != deviceName) {
                            fieldsChange += '$DeviceName';
                        }
                        if (row.raw.DateOfPurchase != dateOfPurchase) {
                            fieldsChange += '$DateOfPurchase';
                        }
                        if (row.raw.DepartmentId != departmentId) {
                            fieldsChange += '$DepartmentId';
                        }
                        if (row.raw.MonthWarranty != monthWarranty) {
                            fieldsChange += '$MonthWarranty';
                        }
                        if (row.raw.ProjectId != projectId) {
                            fieldsChange += '$ProjectId';
                        }
                        if (row.raw.DistributorId != distributorId) {
                            fieldsChange += '$DistributorId';
                        }
                        if (row.raw.Manufacturer != manufacturer) {
                            fieldsChange += '$Manufacturer';
                        }
                        if (row.raw.DeviceStatus != deviceStatus) {
                            fieldsChange += '$DeviceStatus';
                        }
                        if (row.raw.DeviceDetail != deviceDetail) {
                            fieldsChange += '$DeviceDetail';
                        }

                        if (fieldsChange.length > 0) {
                            var entity = {
                                DeviceId: row.get('DeviceId'),
                                DeviceCategoryId: categoryId != "" ? categoryId : null,
                                DepartmentId: departmentId != "" ? departmentId : null,
                                Serial: serial.trim() != "" ? serial.trim() : null,
                                DeviceName: deviceName.trim() != "" ? deviceName.trim() : null,
                                Manufacturer: manufacturer.trim() != "" ? manufacturer.trim() : null,
                                DistributorId: distributorId != "" ? distributorId : null,
                                ProjectId: projectId != "" ? projectId : null,
                                DateOfPurchase: dateOfPurchase,
                                MonthWarranty: monthWarranty != "" ? monthWarranty : null,
                                DeviceStatus: deviceStatus.trim() != "" ? deviceStatus.trim() : null,
                                DeviceAction: row.get('DeviceAction').trim() != "" ? row.get('DeviceAction').trim() : null,
                                DeviceDetail: deviceDetail.trim() != "" ? deviceDetail.trim() : null
                            };

                            Ext.Ajax.request({
                                url: '/api/ApiDevice/Update',
                                method: 'POST',
                                jsonData: entity,
                                params: {
                                    fields: fieldsChange.substring(1)
                                },
                                success: function (transport, option) {
                                    var responseData = Ext.decode(transport.responseText);
                                    if (responseData.success == true) {
                                        var changed = contentPanel.getStore().findRecord('DeviceId', row.get('DeviceId'));
                                        if (changed) {
                                            var arr = fieldsChange.substring(1).split('$');
                                            changed.beginEdit();
                                            for (var i = 0; i < arr.length; i++) {
                                                changed.set(arr[i], Object.getOwnPropertyDescriptor(entity, arr[i]).value);
                                            }
                                            changed.endEdit();
                                            changed.commit();
                                        }
                                    } else {
                                        alert("Lỗi. " + responseData.message);
                                    }
                                },
                                failure: function (transport, option) {
                                    var responseData = Ext.decode(transport.responseText);
                                    alert("Lỗi. " + responseData.message);
                                }
                            });
                        }
                    } else {
                        var deviceStatus2 = '';
                        if (Ext.getCmp('radioG').getValue()) {
                            deviceStatus2 = 'G';
                        }
                        if (Ext.getCmp('radioF').getValue()) {
                            deviceStatus2 = 'F';
                        }
                        if (Ext.getCmp('radioN').getValue()) {
                            deviceStatus2 = 'N';
                        }

                        var entity2 = {
                            DeviceCategoryId: Ext.getCmp('cbbCategory').getValue() != "" ? Ext.getCmp('cbbCategory').getValue() : null,
                            DepartmentId: Ext.getCmp('cbbDepartment').getValue() != "" ? Ext.getCmp('cbbDepartment').getValue() : null,
                            Serial: Ext.getCmp('txtSerial').getValue() != null && Ext.getCmp('txtSerial').getValue().trim() != "" ? Ext.getCmp('txtSerial').getValue().trim() : null,
                            DeviceName: Ext.getCmp('txtDeviceName').getValue() != null && Ext.getCmp('txtDeviceName').getValue().trim() != "" ? Ext.getCmp('txtDeviceName').getValue().trim() : null,
                            Manufacturer: Ext.getCmp('cbbManufacturer').getValue() != null && Ext.getCmp('cbbManufacturer').getValue().trim() != "" ? Ext.getCmp('cbbManufacturer').getValue().trim() : null,
                            DistributorId: Ext.getCmp('cbbDistributor').getValue() != "" ? Ext.getCmp('cbbDistributor').getValue() : null,
                            ProjectId: Ext.getCmp('cbbProject').getValue() != "" ? Ext.getCmp('cbbProject').getValue() : null,
                            DateOfPurchase: Ext.getCmp('txtDateOfPurchase').getValue(),
                            MonthWarranty: Ext.getCmp('txtMonthWarranty').getValue() != "" ? Ext.getCmp('txtMonthWarranty').getValue() : null,
                            DeviceStatus: deviceStatus2 != null && deviceStatus2.trim() != "" ? deviceStatus2.trim() : null,
                            DeviceDetail: Ext.getCmp('txtHtml').getValue() != null && Ext.getCmp('txtHtml').getValue().trim() != "" ? Ext.getCmp('txtHtml').getValue().trim() : null
                        };

                        Ext.Ajax.request({
                            url: '/api/ApiDevice/Create',
                            method: 'POST',
                            jsonData: entity2,
                            success: function (transport, option) {
                                var responseData = Ext.decode(transport.responseText);
                                if (responseData.success == true) {

                                    var selectedTreeNode = treePanel.getSelectionModel().getSelection()[0];
                                    if (selectedTreeNode && selectedTreeNode.get('DeviceCategoryId') == responseData.data.DeviceCategoryId) {
                                        var data = responseData.data;
                                        var departmentData = Ext.create('VTV.TaDMS.Extjs.Model.Department', {
                                            DepartmentId: Ext.getCmp('cbbDepartment').getValue(),
                                            DepartmentName: Ext.getCmp('cbbDepartment').getRawValue()
                                        });
                                        var distributorData = Ext.create('VTV.TaDMS.Extjs.Model.Distributor', {
                                            DistributorId: Ext.getCmp('cbbDistributor').getValue(),
                                            DistributorName: Ext.getCmp('cbbDistributor').getRawValue()
                                        });
                                        var projectData = Ext.create('VTV.TaDMS.Extjs.Model.Project', {
                                            ProjectId: Ext.getCmp('cbbProject').getValue(),
                                            ProjectName: Ext.getCmp('cbbProject').getRawValue()
                                        });

                                        data.Department = departmentData;
                                        data.Distributor = distributorData;
                                        data.Project = projectData;

                                        contentPanel.getStore().insert(1, data);
                                    }

                                } else {
                                    alert("Lỗi. " + responseData.message);
                                }
                            },
                            failure: function (transport, option) {
                                var responseData = Ext.decode(transport.responseText);
                                alert("Lỗi. " + responseData.message);
                            }
                        });
                    }
                }
            }, {
                text: 'Hủy', id: 'btnCancel', tabIndex: 14,
                handler: function () {
                    Ext.getCmp('newDeviceWindown').close();
                }
            }],
            listeners: {
                afterrender: function (win, eOpts) {
                    var a = win.rec;
                    var b = win.treeData;
                    if (a) {
                        Ext.getCmp('txtSerial').setValue(a.raw.Serial);
                        Ext.getCmp('txtDateOfPurchase').setValue(a.get('DateOfPurchase'));
                        Ext.getCmp('txtMonthWarranty').setValue(a.raw.MonthWarranty);
                        Ext.getCmp('txtDeviceName').setValue(a.get('DeviceName'));
                        Ext.getCmp('txtHtml').setValue(a.get('DeviceDetail'));

                        if (a.raw.DeviceCategory) {
                            var category = Ext.create('VTV.TaDMS.Extjs.Model.Category', {
                                DeviceCategoryId: a.raw.DeviceCategory.DeviceCategoryId,
                                DeviceCategoryName: a.raw.DeviceCategory.Name
                            });

                            Ext.getCmp('cbbCategory').setValue(category);
                        }

                        if (a.get('Manufacturer')) {
                            var manufacturer = Ext.create('VTV.TaDMS.Extjs.Model.Manufacturer', {
                                Manufacture: a.get('Manufacturer')
                            });

                            Ext.getCmp('cbbManufacturer').setValue(manufacturer);
                        }

                        if (a.raw.Department) {
                            var department = Ext.create('VTV.TaDMS.Extjs.Model.Department', {
                                DepartmentId: a.raw.Department.DepartmentId,
                                DepartmentName: a.raw.Department.DepartmentName
                            });

                            Ext.getCmp('cbbDepartment').setValue(department);
                        }

                        if (a.raw.Distributor) {
                            var distributor = Ext.create('VTV.TaDMS.Extjs.Model.Distributor', {
                                DistributorId: a.raw.Distributor.DistributorId,
                                DistributorName: a.raw.Distributor.Name
                            });

                            Ext.getCmp('cbbDistributor').setValue(distributor);
                        }

                        if (a.raw.Project) {
                            var project = Ext.create('VTV.TaDMS.Extjs.Model.Project', {
                                ProjectId: a.raw.Project.ProjectId,
                                ProjectName: a.raw.Project.Name
                            });

                            Ext.getCmp('cbbProject').setValue(project);
                        }

                        var status = a.get('DeviceStatus').trim();
                        switch (status) {
                            case 'G':
                                Ext.getCmp('radioG').setValue(true);
                                return;
                            case 'F':
                                Ext.getCmp('radioF').setValue(true);
                                return;
                            case 'N':
                                Ext.getCmp('radioN').setValue(true);
                                return;
                            default:
                                Ext.getCmp('radioG').setValue(true);
                        }
                    }

                    if (b) {
                        Ext.getCmp('cbbCategory').setValue(win.treeData);
                    }

                    Ext.getCmp('cbbCategory').focus(true, true);
                }
            }
        });

        var contentPanel = Ext.create('Ext.grid.Panel', {
            title: 'Danh sách thiết bị',
            region: 'center',
            store: contentStore,
            columns: [{
                text: 'Serial', width: 100, dataIndex: 'Serial'
            }, {
                text: 'Tên thiết bị', flex: 1, dataIndex: 'DeviceName', minWidth: 250
            }, {
                text: 'Ngày mua', width: 80, dataIndex: 'DateOfPurchase'
            }, {
                text: 'Bảo hành', width: 80, dataIndex: 'MonthWarranty',
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value) {
                        return value + ' tháng';
                    } else {
                        return null;
                    }
                }
            }, {
                text: 'Trạng thái', width: 110, dataIndex: 'DeviceStatus'
            }, {
                text: 'Danh mục', width: 150, dataIndex: 'DeviceCategoryId', hidden: true,
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value && record.raw.DeviceCategory) {
                        return record.raw.DeviceCategory.Name;
                    }
                }
            }, {
                text: 'Phòng ban', width: 150, dataIndex: 'DepartmentId', hidden: true,
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value && record.raw.Department) {
                        return record.raw.Department.DepartmentName;
                    }
                }
            }, {
                text: 'Phân phối', width: 150, dataIndex: 'DistributorId',
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value != null && record.raw.Distributor != null) {
                        return record.raw.Distributor.Name;
                    }
                }
            }, {
                text: 'Hãng sản xuất', width: 150, dataIndex: 'Manufacturer'
            }, {
                text: 'Dự án', width: 150, dataIndex: 'ProjectId',
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value != null && record.raw.Project != null) {
                        return record.raw.Project.Name;
                    }
                }
            }, {
                xtype: 'actioncolumn', text: 'Thao tác', width: 70, menuDisable: true, sortable: false, hideable: false, align: 'center',
                items: [{
                    icon: '../Content/icon/edit.png',
                    tooltip: 'Sửa',
                    handler: function (grid, rowIndex, colIndex, item, e, record) {
                        var row = grid.getStore().getAt(rowIndex);
                        if (row) {
                            Ext.create('DeviceWindown', {
                                id: 'newDeviceWindown',
                                rec: row
                            }).show();
                        }
                    }
                }, {
                    icon: '../Content/icon/delete.gif',
                    tooltip: 'Xóa',
                    handler: function (grid, rowIndex, colIndex, item, e, record) {
                        Ext.Msg.show({
                            title: 'Xác nhận',
                            msg: 'Xác nhận xóa dữ liệu ?',
                            width: 250,
                            buttons: Ext.MessageBox.OKCANCEL,
                            buttonText: {
                                ok: 'Xóa',
                                cancel: 'Hủy'
                            },
                            icon: Ext.MessageBox.QUESTION,
                            fn: function (buttonId, text, opt) {
                                if (buttonId == 'ok') {
                                    var gridStore = contentPanel.getStore();
                                    var rec = gridStore.getAt(rowIndex);
                                    if (rec) {
                                        var entity = {
                                            DeviceId: rec.get('DeviceId')
                                        };

                                        Ext.Ajax.request({
                                            url: '/api/ApiDevice/Delete',
                                            method: 'POST',
                                            jsonData: entity,
                                            success: function (transport, option) {
                                                var responseData = Ext.decode(transport.responseText);
                                                if (responseData.success == true) {
                                                    gridStore.remove(rec);

                                                } else {
                                                    Ext.MessageBox.show({
                                                        title: 'Lỗi',
                                                        msg: responseData.message,
                                                        icon: Ext.MessageBox.ERROR,
                                                        buttons: Ext.Msg.OK
                                                    });
                                                }
                                            },
                                            failure: function (transport, option) {
                                                var responseData = Ext.decode(transport.responseText);
                                                Ext.MessageBox.show({
                                                    title: 'Lỗi',
                                                    msg: responseData.message,
                                                    icon: Ext.MessageBox.ERROR,
                                                    buttons: Ext.Msg.OK
                                                });
                                            }
                                        });
                                    }
                                }
                                else if (buttonId == 'cancel') {

                                }
                            }
                        });
                    }
                }]
            }],
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: contentStore,
                displayInfo: true,
                displayMsg: 'Danh sách: từ {0} đến {1}.  Tổng số: {2}',
                emptyMsg: "Không có thiết bị nào"
            }),
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Thêm thiết bị',
                    iconCls: 'icon-add',
                    handler: function () {
                        var selectedTreeNode = treePanel.getSelectionModel().getSelection()[0];
                        if (selectedTreeNode) {
                            var deviceCategoryId = selectedTreeNode.get('DeviceCategoryId');
                            var deviceCategoryName = selectedTreeNode.get('Name');

                            var treeData1 = Ext.create('VTV.TaDMS.Extjs.Model.Category', {
                                DeviceCategoryId: deviceCategoryId,
                                DeviceCategoryName: deviceCategoryName
                            });

                            Ext.create('DeviceWindown', {
                                id: 'newDeviceWindown',
                                treeData: treeData1
                            }).show();
                        } else {
                            Ext.create('DeviceWindown', {
                                id: 'newDeviceWindown'
                            }).show();
                        }
                    }
                }]
            }]
        });

        var searchPanel = Ext.create('Ext.panel.Panel', {
            title: 'Tìm kiếm', region: 'north', layout: 'fit', collapsible: true, split: true, height: 190, minHeight: 120, maxHeight: 250,
            items: [{
                xtype: 'form', bodyPadding: '10 10 10 10', autoScroll: true,
                fieldDefaults: {
                    msgTarget: 'side', labelWidth: 60, labelAlign: 'left'
                },
                plugins: {
                    ptype: 'datatip'
                },
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'container', layout: 'hbox', anchor: '100%',
                    items: [{
                        xtype: 'container', flex: 1, border: false, layout: 'anchor',
                        items: [{
                            fieldLabel: 'Số serial', id: 'cbbSerialS', anchor: '90%', tooltip: 'Nhập số serial', tabIndex: 4, xtype: 'combo',
                            store: serialComboStore, displayField: 'Serial', valueField: 'Serial', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{Serial}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Tên', id: 'cbbDeviceNameS', anchor: '90%', tooltip: 'Nhập tên thiết bị', tabIndex: 7, xtype: 'combo',
                            store: deviceNameComboStore, displayField: 'DeviceName', valueField: 'DeviceName', pageSize: 5, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DeviceName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Trạng thái', id: 'cbbDeviceStatusS', anchor: '90%', tooltip: 'Nhập trạng thái', tabIndex: 6, xtype: 'combo',
                            store: deviceStatusComboStore, displayField: 'DeviceStatus', valueField: 'DeviceStatus', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DeviceStatus}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Danh mục', id: 'cbbCategoryS', anchor: '90%', tooltip: 'Chọn danh mục thiết bị', tabIndex: 0, xtype: 'combo',
                            store: categoryComboStore, displayField: 'DeviceCategoryName', valueField: 'DeviceCategoryId', triggerAction: 'all', pageSize: 10, minChars: 1,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DeviceCategoryName}' +
                                        '</div>';
                                }
                            }
                        }]
                    }, {
                        xtype: 'container', flex: 1, border: false, layout: 'anchor',
                        items: [{
                            xtype: 'datefield', fieldLabel: 'Ngày mua', id: 'txtDateOfPurchaseS', anchor: '90%', tooltip: 'Nhập ngày mua', tabIndex: 1
                        }, {
                            xtype: 'datefield', fieldLabel: 'Từ', id: 'txtFromDateOfPurchaseS', anchor: '90%', tabIndex: 1
                        }, {
                            xtype: 'datefield', fieldLabel: 'Đến', id: 'txtToDateOfPurchaseS', anchor: '90%', tabIndex: 1
                        }, {
                            fieldLabel: 'Bảo hành', id: 'cbbMonthWarrantyS', anchor: '90%', tooltip: 'Nhập ngày bảo hành', tabIndex: 6, xtype: 'combo',
                            store: monthWarrantyComboStore, displayField: 'MonthWarranty', valueField: 'MonthWarranty', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{MonthWarranty}' +
                                        '</div>';
                                }
                            }
                        }]
                    }, {
                        xtype: 'container', flex: 1, border: false, layout: 'anchor',
                        items: [{
                            fieldLabel: 'Phòng', id: 'cbbDepartmentS', anchor: '100%', tooltip: 'Chọn phòng', tabIndex: 4, xtype: 'combo',
                            store: departmentComboStore, displayField: 'DepartmentName', valueField: 'DepartmentId', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DepartmentName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Phân phối', id: 'cbbDistributorS', anchor: '100%', tooltip: 'Nhập hãng phân phối', tabIndex: 7, xtype: 'combo',
                            store: distributorComboStore, displayField: 'DistributorName', valueField: 'DistributorId', pageSize: 5, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{DistributorName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Dự án', id: 'cbbProjectS', anchor: '100%', tooltip: 'Chọn dự án', tabIndex: 6, xtype: 'combo',
                            store: projectComboStore, displayField: 'ProjectName', valueField: 'ProjectId', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{ProjectName}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: 'Sản xuất', id: 'cbbManufacturerS', anchor: '100%', tooltip: 'Nhập hãng sản xuất', tabIndex: 8, xtype: 'combo',
                            store: manufacturerComboStore, displayField: 'Manufacture', valueField: 'Manufacture', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{Manufacture}' +
                                        '</div>';
                                }
                            }
                        }]
                    }]
                }],
                buttons: [{
                    text: 'Tìm kiếm',
                    handler: function () {
                        var serialS = Ext.getCmp('cbbSerialS').getValue();
                        var deviceNameS = Ext.getCmp('cbbDeviceNameS').getValue();
                        var deviceStatusS = Ext.getCmp('cbbDeviceStatusS').getValue();
                        var categoryS = Ext.getCmp('cbbCategoryS').getRawValue() != null ? Ext.getCmp('cbbCategoryS').getRawValue() : null;
                        var dateOfPurchaseS = Ext.getCmp('txtDateOfPurchaseS').getValue();
                        var fromDateOfPurchaseS = Ext.getCmp('txtFromDateOfPurchaseS').getValue();
                        var toDateOfPurchaseS = Ext.getCmp('txtToDateOfPurchaseS').getValue();
                        var monthWarrantyS = Ext.getCmp('cbbMonthWarrantyS').getValue();
                        var departmentS = Ext.getCmp('cbbDepartmentS').getRawValue() != null ? Ext.getCmp('cbbDepartmentS').getRawValue() : null;
                        var distributorS = Ext.getCmp('cbbDistributorS').getRawValue() != null ? Ext.getCmp('cbbDistributorS').getRawValue() : null;
                        var projectS = Ext.getCmp('cbbProjectS').getRawValue() != null ? Ext.getCmp('cbbProjectS').getRawValue() : null;
                        var manufacturerS = Ext.getCmp('cbbManufacturerS').getValue();

                        if (dateOfPurchaseS != null) {
                            fromDateOfPurchaseS = null;
                            toDateOfPurchaseS = null;
                        }
                        if (fromDateOfPurchaseS != null && toDateOfPurchaseS != null) {
                            dateOfPurchaseS = null;
                        }
                        
                        contentStore.getProxy().extraParams = {
                            start: 0,
                            limit: 20,
                            serial: serialS,
                            deviceName: deviceNameS,
                            deviceStatus: deviceStatusS,
                            deviceCategory: categoryS,
                            dateOfPurchase: dateOfPurchaseS,
                            dateOfPurchaseFrom: fromDateOfPurchaseS,
                            dateOfPurchaseTo: toDateOfPurchaseS,
                            monthWarranty: monthWarrantyS,
                            department: departmentS,
                            distributor: distributorS,
                            project: projectS,
                            manufacturer: manufacturerS
                        };

                        contentStore.load();

                        contentStore.on('load', function () {
                            var total = contentStore.getTotalCount();
                            if (total) {
                                contentPanel.setTitle('Danh sách thiết bị: tìm được ' + total + ' kết quả');
                            }
                        });
                    }
                }]
            }]
        });

        var centerPanel = Ext.create('Ext.panel.Panel', {
            region: 'center', layout: 'border',
            items: [contentPanel, searchPanel]
        });

        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [treePanel, centerPanel]
        });

    });

</script>
